<template>
  <view class="view-page">
    <top-nav :navbar-data="navbarData"></top-nav>
    <view class="page-content mine">
      <view class="tabs">
        <view
          :data-index="index"
          :class="'tabs-item ' + (index == currentTabIndex ? 'active' : '')"
          @tap="switchTabIndex"
          v-for="(item, index) in tabItem"
          :key="index"
        >
          {{ item }}
          <image
            v-if="index == currentTabIndex"
            class="active_icon"
            src="../../../static/ai/icon/tab_icon.png"
          ></image>
        </view>
      </view>
      <view v-if="currentTabIndex === 0" class="importBox">
        <image
          class="import-bg"
          src="https://cdn1.visiotrip.com/h5AndMini/import_order_bg.png"
        />
        <view class="import-view">
          <view class="import-title">自动同步订单</view>
          <view class="import-content"
            >我们将自动同步你在携程/飞猪/美团或其他渠道购买使用当前登录手机号作为预订人的订单，
            本次授权后，后续将为你自动同步订单!</view
          >
          <button type="primary" class="save-btn" @click="toAuthorize">
            授权同步
          </button>
        </view>
      </view>
      <view v-if="currentTabIndex === 1" class="inputBox">
        <view class="titleBox">
          <view class="desc-text"
            >如需导入订单，请输入你在携程/飞猪/美团的订单号和预订人手机号，验证通过后即可二次预约</view
          >
        </view>
        <view class="input-box">
          <view class="input-view">
            <input
              placeholder-class="pla-class"
              v-model="orderInput"
              placeholder="输入渠道订单号"
            />
          </view>
        </view>
        <view class="input-box">
          <view class="input-view">
            <input
              placeholder-class="pla-class"
              v-model="phoneInput"
              placeholder="输入手机号"
            />
            <button
              plain="true"
              :disabled="disabled"
              :class="'code_btn ' + (disabled ? 'code_disabled' : '')"
              type="default"
              @click="toGetCode"
            >
              {{ disabled ? `${time}秒后重新获取` : "获取验证码" }}
            </button>
          </view>
        </view>
        <view class="input-box">
          <view class="input-view">
            <input
              placeholder-class="pla-class"
              v-model="codeInput"
              placeholder="输入验证码"
            />
          </view>
        </view>
        <button type="primary" class="save-btn" @click="toSubmit">
          导入订单
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import topNav from "../components/topNavBar/index.vue";
export default {
  components: {
    topNav,
  },
  data() {
    return {
      // 导航头组件所需的参数
      navbarData: {
        showCapsule: 1,
        //是否显示左上角图标   1表示显示    0表示不显示
        title: "订单导入",
        //导航栏 中间的标题
        white: true,
        // 是就显示白的，不是就显示黑的。
        showTitle: true,
        address: "",
        // 加个背景 不加就是没有
        bgColor: true,
        fileList: [],
      },
      tabItem: ["自动同步"],
      currentTabIndex: 0,
      orderInput: "", // 订单号
      phoneInput: "", // 手机号
      codeInput: "", // 验证码
      disabled: false,
      time: 60,
      show: false,
      content: "",
      asyncNumber: 0,
    };
  },
  methods: {
    // 获取短信验证码
    sendCode() {
      const that = this;
      that
        .$aiRequest({
          url: "/user/sendSms",
          method: "POST",
          params: {
            phoneNumber: that.phoneInput,
            smsTemplate: 1,
          },
        })
        .then((resp) => {
          if (resp.success) {
            let time = that.time;
            that.disabled = true;
            const timer = setInterval(() => {
              time -= 1;
              that.time = time;
              if (time <= -1) {
                clearInterval(timer);
                that.disabled = false;
                that.time = 60;
              }
            }, 1000);
          }
        });
    },
    _sendRequest(type) {
      const that = this;
      that.disabled = true;
      that
        .$aiRequest({
          url: "/app/mine/order/orderDetail",
          method: "POST",
          params: {
            channelOrderId: that.orderInput,
            mobile: that.phoneInput,
            code: type === "code" ? "" : that.codeInput,
          },
        })
        .then((res) => {
          that.disabled = false;
          if (res.success) {
            if (type === "code") {
              // 验证通过，发送短信验证码
              that.sendCode();
            } else {
              uni.showToast({
                title: "导入成功",
                icon: "none",
                duration: 1500,
              });
              setTimeout(() => {
                that.$navTo(
                  "/packageApp/pages/orderCode/ordercode",
                  {
                    orderId: res.data.subOrderId,
                  },
                  "redirectTo"
                );
              }, 2000);

              // uni.navigateBack()
            }
          } else {
            uni.showToast({
              title: res.errMsg,
              icon: "none",
            });
          }
        });
    },
    // 获取验证码
    toGetCode() {
      const that = this;
      const regPhone = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
      if (!that.phoneInput) {
        uni.showToast({
          title: "请输入手机号码",
          icon: "none",
        });
      } else if (!regPhone.test(that.phoneInput)) {
        uni.showToast({
          title: "手机号码格式不正确！",
          icon: "none",
        });
      } else {
        // 验证渠道订单号是否存在、手机号码是否对应
        that._sendRequest("code");
      }
    },
    // 导入
    toSubmit() {
      const { phoneInput, codeInput, orderInput } = this.$data;
      const regPhone = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
      if (!orderInput) {
        uni.showToast({
          title: "请输入渠道订单号",
          icon: "none",
        });
      } else if (!phoneInput) {
        uni.showToast({
          title: "请输入手机号码",
          icon: "none",
        });
      } else if (!codeInput) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
      } else if (!regPhone.test(this.phoneInput)) {
        uni.showToast({
          title: "手机号码格式不正确！",
          icon: "none",
        });
      } else {
        this._sendRequest("submit");
      }
    },
    switchTabIndex: function (e) {
      this.setData({
        currentTabIndex: e.currentTarget.dataset.index,
      });
    },
    //同步订单
    toAuthorize() {
      let that = this;
      let params = {
        behaviorStatus: 1,
        behaviorType: 1,
      };
      uni.showLoading({
        title: "同步中",
      });
      //同步订单
      this.$aiRequest({
        url: "/app/updateMemberBehavior",
        method: "POST",
        params,
      }).then((res) => {
        if (res.success) {
          console.log(res.data, "555");
          if (res.data !== 0) {
            this.asyncNumber = res.data;
            this.content = `已同步成功${res.data}个订单，请在订单列表查看您的订单。`;
          } else {
            this.content = "当前没有订单需要同步";
          }
          uni.showModal({
            title: "提示",
            content: this.content,
			confirmText:'好的',
			showCancel:false,
            success: function (res) {
              if (res.confirm) {
                console.log("用户点击确定");
                that.confirm();
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        }else{
			uni.showToast({
				title:res.errMsg,
				icon:'none'
			})
		}
        this.$aiRequest({
          url: "/wechat/getCurrUser",
          method: "POST",
          header: {
            "Content-Type": "application/json",
          },
        }).then((res) => {
          uni.hideLoading();
          if (res.success) {
            uni.setStorageSync("openid", res.data.openid);
            uni.setStorageSync("currUser", res.data);
          }
        });
      });
    },
    confirm() {
      // this.$navTo('/packageB/pages/myOrderList/myOrderList', { status: 3, key: 3 }, 'redirectTo')
      let isReload = false;
      if (this.asyncNumber) {
        isReload = true;
      }
      uni.navigateBack({
        delta: 1,
        success: function () {
          if (isReload) {
            var pages = getCurrentPages();
            var aPage = pages[pages.length - 1];
            console.log(aPage, "8888888888888");
            aPage.onShow(1);
          }
        },
      });
    },
  },
};
</script >

<style lang="scss" scoped>
.page-content.mine {
  background: #ffffff;
}

.mine .titleBox {
  display: flex;
  flex-direction: column;
}

.title-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #000000;
  margin: 34rpx 0 16rpx 0;
}

.desc-text {
  font-size: 28rpx;
  font-weight: normal;
  color: #999999;
}

.inputBox {
  margin: 100rpx 60rpx 0 60rpx;
}

.input-box {
  display: flex;
  flex-direction: column;
  margin: 64rpx 0rpx 0 0rpx;
  padding-bottom: 27rpx;
}

.inputView {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
}

.input-view {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #e6e6e6;
  padding-bottom: 27rpx;
  border-bottom: 1rpx solid #e6e6e6;
}

.phone-select {
  margin-right: 30rpx;
}

/* /deep/ .input-view .pla-class {
		color: #CCCCCC;
	} */
.input-view input {
  flex: 1;
}

.input-view .code_btn {
  background-color: #ffffff;
  /* width: 240rpx; */
  border: none;
  border-radius: 35rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #f75d1f;
  height: 40rpx;
  line-height: 40rpx;
}

.input-view .code_disabled {
  color: #999999;
}

.save-btn {
  height: 82rpx;
  background: $sl-color-btn-background;
  border-radius: 41rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 82rpx;
  margin-top: 80rpx;
}

.tabs {
  padding: 22rpx 32rpx;
  display: flex;
  align-items: center;
}

.tabs .active {
  font-size: 48rpx;
  font-weight: 500;
}

.tabs-item {
  z-index: 10;
  font-weight: 500;
  color: $sl-color-black;
  font-size: 32rpx;
  margin-right: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabs-item view {
  z-index: 10;
}

.active_icon {
  width: 48rpx;
  height: 14rpx;
}

.importBox {
  display: flex;
  flex-direction: column;
  margin-top: 28rpx;
}

.import-bg {
  width: 100%;
  height: 540rpx;
}

.import-view {
  margin: 0 44rpx;
}

.import-title {
  font-size: 40rpx;
  font-weight: 500;
  color: $sl-color-dark-grey;
  text-align: center;
  margin: 54rpx 0 20rpx 0;
}

.import-content {
  font-size: 28rpx;
  font-weight: 400;
  color: $sl-color-grey;
  padding-bottom: 20rpx;
}
</style>
